<%@page language="java"%>
<%@page contentType="text/html; charset=UTF-8"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/main.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/menu.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/card.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/font-awesome.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/calendarDate.css">
		<script src="${pageContext.request.contextPath}/static/calendarDate.js"></script>
		<title>知乎日报</title>
	</head>
	<body>
		<div id="container">
			<div id="menu_wrap">
				<ul id="menu_left">
					<li><a href="${pageContext.request.contextPath}/latest.html">最新日报</a></li>
					<li><a href="${pageContext.request.contextPath}/hot.html">热门日报</a></li>
					<li><a href="http://git.oschina.net/tmaize/zh_daily/" target="_blank">关于</a></li>
				</ul>
				<ul id="menu_right">
					<li>
						<form action="${pageContext.request.contextPath}/before.html" method="post" id="dateform">
							<div class="date123"></div>
							<input style="display: none;" type="submit" id="sub" value="submit" />
						</form>
					</li>
					<li><a onclick="submit()">时空穿梭</a></li>
				<ul>
			</div>
			<div class="team-members">
				<c:forEach var="detail" items="${details}">
					<div id="animation123" class="single-member effect-3">
						<div class="member-image">
							<%-- 由于知乎设置了防盗链，只好先将图片流下载到服务器里，在展现给用户 --%>
							<img src="${pageContext.request.contextPath}/downloadImage?url=${detail.image}" />
						</div>
						<div class="member-info">
							<div class="effect-3-title my_hover">
								<a href="${detail.share_url}">${detail.title}</a>
							</div>
							<div class="effect-3-time">${detail.image_source}</div>
						</div>
					</div>
				</c:forEach>
				<div id="clearfix" ></div>
			</div>
		</div>
		<script type="text/javascript">
			var begin = "${pageContext.request.contextPath}";
			var url = window.location.pathname;
			var latest = document.getElementById("menu_left").getElementsByTagName("a")[0];
			var hot = document.getElementById("menu_left").getElementsByTagName("a")[1]
			if(url==begin+"/" || url==begin+"/latest.html" || url==begin+"/index.html" || url==begin+"/index.jsp"){
				latest.style.background="#8ECB8D";
				latest.style.color="#FFFFFF";
				//不能用 return
			}
			if(url==begin+"/hot.html"){
				hot.style.background="#8ECB8D";
				hot.style.color="#FFFFFF";
			}
		</script>
		<script type="text/javascript">
        	function submit() {
            	document.getElementById ('sub').click ();
        	}
    	</script>
		<script type="text/javascript">
        	'use strict'
        	var main = document.querySelector('.date123')
        	var calendar = new CalendarDate(main)
        	// 启动日历插件
        	calendar.start()
    	</script>
	</body>
</html>